<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-28 10:38:19
 *@描述:低倍率病例结余情况
!-->
<template>
  <div class="page-tile-23">
    <div class="page-tile-23-bottom" ref="pageTitle23EchartsRefs"></div>
    <div class="page-tile-23-top">
      <formList topHeightValue="10%" bottomHeightValue="90%" :formParameter="formParameter" :data_list="data_list" />
    </div>
    <div class="num-data-box">
      <div class="num-data">
        <div v-if="card1.text1_1 != null" class="tong-num-data">
          <div class="num-data-bottom">同期总结余金额(元)</div>
          <div class="num-data-top" :style="{ color: card1.text1_1 < 0 ? '#ff0000' : '#000' }">
            {{ card1.text1_1 }}
          </div>
        </div>
        <div class="ben-num-data">
          <div class="num-data-bottom">本期总结余金额(元)</div>
          <div class="num-data-top" :style="{ color: card1.text1 < 0 ? '#ff0000' : '#000' }">
            {{ card1.text1 }}
          </div>
        </div>
      </div>
      <div class="num-data">
        <div v-if="card1.text4_4 != null" class="tong-num-data">
          <div class="num-data-bottom">同期病例数(例)</div>
          <div class="num-data-top">
            {{ card1.text2_2 }}
            <span style="font-size: 1.2rem">占{{ card1.text4_4 }}%</span>
          </div>
        </div>
        <div class="ben-num-data">
          <div class="num-data-bottom">本期病例数(例)</div>
          <div class="num-data-top">
            {{ card1.text2 }}
            <span style="font-size: 1.2rem">占{{ card1.text4 }}%</span>
          </div>
        </div>
      </div>
      <div class="num-data">
        <div v-if="card1.text3_3 != null" class="tong-num-data">
          <div class="num-data-bottom">同期例均结余(元)</div>
          <div class="num-data-top" :style="{ color: card1.text3_3 < 0 ? '#ff0000' : '#000' }">
            {{ card1.text3_3 }}
          </div>
        </div>
        <div class="ben-num-data">
          <div class="num-data-bottom">本期例均结余(元)</div>
          <div class="num-data-top" :style="{ color: card1.text3 < 0 ? '#ff0000' : '#000' }">
            {{ card1.text3 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import formList from '../components/formList/formList';

export default {
  // 组件名称
  name: 'pageTile23',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    formList,
  },
  // 组件状态值
  data() {
    return {
      card1: {},
      data_list: [],
      formParameter: [
        { width: '8%', title: '月份' },
        { width: '5%', title: '病例数' },
        { width: '12%', title: '总结余(元)' },
        { width: '10%', title: '例均结余' },
        { width: '10%', title: '次均费用' },
        { width: '13%', title: '平均点值' },
        { width: '10%', title: 'CMI' },
        { width: '10%', title: '平均住院天数' },
        { width: '14%', title: '每权重费用' },
        { width: '11%', title: '每权重天数' },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data, typeValue) {
      if (typeValue === '非全院') {
        this.formParameter = [
          { width: '8%', title: '月份' },
          { width: '5%', title: '病例数' },
          { width: '12%', title: '总结余(元)' },
          { width: '10%', title: '例均结余' },
          { width: '10%', title: '次均费用' },
          { width: '10%', title: '平均点值' },
          { width: '10%', title: '平均点数' },
          { width: '6%', title: 'CMI' },
          { width: '10%', title: '平均住院天数' },
          { width: '11%', title: '每100点次均费用' },
          { width: '11%', title: '每100点住院天数' },
        ];
      } else {
        this.formParameter = [
          { width: '8%', title: '月份' },
          { width: '5%', title: '病例数' },
          { width: '12%', title: '总结余(元)' },
          { width: '10%', title: '例均结余' },
          { width: '10%', title: '次均费用' },
          { width: '13%', title: '平均点值' },
          { width: '10%', title: 'CMI' },
          { width: '10%', title: '平均住院天数' },
          { width: '14%', title: '每权重费用' },
          { width: '11%', title: '每权重天数' },
        ];
      }
      let data_list = data.data_list;
      this.echartsInit(data_list);
      //内容
      this.cardData(data.desc);
    },
    // 图表
    echartsInit(data_list) {
      this.data_list = data_list;
      let myChart = echarts.init(this.$refs.pageTitle23EchartsRefs);
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        legend: {
          data: ['总结余(元)'],
          textStyle: {
            fontSize: 18,
          },
          itemStyle: {
            color: '#428df7',
          },
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              fontSize: 18,
              formatter: function (value) {
                var maxLength = 10; // 每行显示的最大字符数
                var result = '';
                for (var i = 0; i < value.length; i++) {
                  result += value[i];
                  if ((i + 1) % maxLength === 0) {
                    result += '\n'; // 每maxLength字符换行
                  }
                }
                return result;
              },
            },
            // prettier-ignore
            data: [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '总结余(元)',
            position: 'left',
            alignTicks: true,
            axisLine: {
              fontSize: 18,
              show: true,
            },
            nameTextStyle: {
              fontSize: 18,
            },
          },
        ],
        series: [
          {
            name: '总结余(元)',
            type: 'bar',
            yAxisIndex: 0,
            barMaxWidth: 50,
            data: [],
            itemStyle: {
              color: function (params) {
                // 判断数据值是正数还是负数
                if (params.value >= 0) {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: ' #01cafe', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#106bf3', // 结束颜色
                      },
                    ],
                  }; // 正数的颜色为红色
                } else {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: '#ec442a', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#ee8296', // 结束颜色
                      },
                    ],
                  }; // 负数的颜色为绿色
                }
              },
            },
            label: {
              position: 'top',
              show: true,
              color: '#000',
              fontSize: 18,
              formatter: '{c}元',
            },
          },
        ],
      };
      data_list.forEach((item, index) => {
        option.xAxis[0].data.push(item['月份']);
        option.series[0].data.push(item['总结余(元)']);
      });
      option && myChart.setOption(option);
    },
    //卡片内容
    cardData(desc) {
      this.card1 = {
        text1: desc['结余金额(元)'],
        text1_1: desc['同期结余金额(元)'],
        text2: desc['病例数(例)'],
        text2_2: desc['同期病例数(例)'],
        text3: desc['例均结余(元)'],
        text3_3: desc['同期例均结余(元)'],
        text4: desc['占比(%)'],
        text4_4: desc['同期占比(%)'],
      };
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-tile-23 {
  position: relative;
  height: 100%;
  .page-tile-23-top {
    height: 60%;
  }
  .page-tile-23-bottom {
    height: 40%;
  }

  .num-data-box {
    display: flex;
    align-items: center;
    position: absolute;
    top: -12vh;
    right: 0;
    height: 10vh;
    font-size: 1.2rem;
    .num-data {
      margin-right: 30px;
      display: flex;
      flex-direction: column;
      .tong-num-data {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
      }
      .ben-num-data {
        display: flex;
        align-items: center;
      }
      .num-data-top {
        font-size: 1.5rem;
      }
      .num-data-bottom {
        margin-right: 15px;
      }
    }
  }
}
</style>
